<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约详情管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <style>
        /* 全局样式 */
        body {
            background-color: #f7fafc;
            font-family: 'Segoe UI', sans-serif;
        }
        .main-container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 20px;
        }
        /* 搜索模块 */
        .search-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            padding: 25px;
            margin-bottom: 30px;
        }
        .search-icon {
            color: #646cff;
            font-size: 1.2em;
        }
        /* 卡片式列表 */
        .appointment-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            margin-bottom: 20px;
            padding: 20px;
            transition: transform 0.3s ease;
        }
        .appointment-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.12);
        }
        .card-header {
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 12px;
            margin-bottom: 15px;
        }
        .card-meta {
            color: #6b7280;
            font-size: 0.9em;
            margin-bottom: 8px;
        }
        .detail-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 15px;
        }
        .item-label {
            font-weight: 500;
            color: #374151;
        }
        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
        }
        .page-btn {
            margin: 0 5px;
            padding: 6px 12px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        .current-page {
            background-color: #646cff;
            color: white;
            font-weight: 600;
        }
        /* 响应式调整 */
        @media (max-width: 768px) {
            .detail-item {
                grid-template-columns: 1fr;
            }
            .search-card {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
<div class="main-container">

    <!-- 搜索模块 -->
    <div class="search-card">
        <form class="ui form" th:action="@{/appointmentDetailsById}" method="get">
            <div class="fields">
                <div class="twelve wide field">
                    <div class="ui left icon input">
                        <i class="search search-icon"></i>
                        <input type="text" name="id" placeholder="输入预约挂号ID搜索...">
                    </div>
                </div>
                <div class="four wide field">
                    <button type="submit" class="ui fluid primary button">搜索</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 预约详情卡片列表 -->
    <div th:if="${#lists.isEmpty(page.list)}" class="ui info message">
        <i class="info icon"></i>
        <div class="header">提示</div>
        暂无符合条件的预约记录
    </div>

    <div th:each="detail : ${page.list}" class="appointment-card">
        <div class="card-header">
            <h4 class="ui header">
                预约详情 #<span th:text="${detail.id}">1001</span>
                <div class="sub header card-meta">
                    创建时间：<span th:text="${#dates.format(detail.create_date, 'yyyy-MM-dd HH:mm')}">2025-04-01 09:30</span>
                </div>
            </h4>
        </div>

        <div class="detail-item">
            <div>
                <div class="item-label">患者信息</div>
                <div>患者ID：<span th:text="${detail.patient_id}">PAT20250401</span></div>
                <div>挂号ID：<span th:text="${detail.registration_id}">REG20250401</span></div>
            </div>

            <div>
                <div class="item-label">就诊信息</div>
                <div>就诊房间：<span th:text="${detail.room_number} ?: '未分配'">A101</span></div>
                <div>医生信息：<span th:text="${detail.doctor_name} ?: '未指派'">张医生</span>（ID：<span th:text="${detail.doctor_id} ?: '-'">DOC1001</span>）</div>
            </div>
        </div>

        <div class="detail-item">
            <div>
                <div class="item-label">时间信息</div>
                <div>就诊时间：<span th:text="${#dates.format(detail.treatment_time, 'yyyy-MM-dd HH:mm')} ?: '-'">2025-04-01 10:00</span></div>
            </div>
        </div>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
        <a th:href="@{/appointmentDetails(pageNum=${page.pageNum}-1, id=${param.id})}"
           class="page-btn basic mini"
           th:unless="${page.isFirstPage}">
            <i class="chevron left icon"></i> 上一页
        </a>

        <span class="page-info" style="margin: 0 15px;">
            第 <strong th:text="${page.pageNum}">1</strong> 页 / 共 <strong th:text="${page.pages}">4</strong> 页 | 总计 <strong th:text="${page.total}">29</strong> 条记录
        </span>

        <a th:href="@{/appointmentDetails(pageNum=${page.pageNum}+1, id=${param.id})}"
           class="page-btn basic mini"
           th:unless="${page.isLastPage}">
            下一页 <i class="chevron right icon"></i>
        </a>

        <form name="pageForm" th:action="@{/appointmentDetails}" method="get" style="margin-left: 20px;">
            <input type="hidden" name="id" th:value="${param.id}">
            <div class="ui mini input">
                <input type="number" class="m-bg" name="pageNum" placeholder="页码"
                       style="width: 50px; height: 30px;" required
                       th:value="${page.pageNum}">
                <button type="submit" class="ui tiny primary button">GO</button>
            </div>
        </form>
    </div>

    <!-- 提示消息 -->
    <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
        <i class="close icon"></i>
        <div class="header">操作成功</div>
        <p th:text="${message}"></p>
    </div>

</div>

<!-- 引入 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>
    // 消息关闭动画
    $(".message .close").on('click', function () {
        $(this).closest(".message").transition("fade");
    });

    // 卡片点击缩放效果
    $(".appointment-card").on('mouseenter', function () {
        $(this).addClass('zoom-in');
    }).on('mouseleave', function () {
        $(this).removeClass('zoom-in');
    });
</script>
</body>
</html>